<template>
<div>
  <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
    <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-promotion"></i> 财务报表</el-breadcrumb-item>
  </el-breadcrumb>

  <el-divider></el-divider>
  <span class="demonstration">财务报表:</span>
  <el-date-picker
      v-model="value1"
      type="datetime"
      placeholder="选择日期时间">
  </el-date-picker>

  <el-date-picker
      style="margin-left:20px"
      v-model="value2"
      type="datetime"
      placeholder="选择日期时间">
  </el-date-picker>
  <el-button size="mini" @click="search()" type="primary" style="margin-left: 30px">
    查看
  </el-button>
  <el-button size="mini" type="primary" style="margin-left: 40px" @click="exportExcelSelect()">
    导出EXCEL
  </el-button>
  <el-divider></el-divider>
<!--数据表格  -->
  <el-table :data="tableData" @selection-change="handleSelectionChange" border style="width: 100%">
    <el-table-column type="selection">
    </el-table-column>
    <el-table-column prop="productId" label="ID" align="center" width="80"></el-table-column>
    <el-table-column prop="productName" label="商品名称" align="center" width="180"></el-table-column>
    <el-table-column prop="productDescription" label="商品描述" align="center" width="180"></el-table-column>
    <el-table-column prop="status" label="商品状态" align="center" width="120"></el-table-column>
    <el-table-column prop="productTransactionDate" label="商品交易时间" align="center" width="180"></el-table-column>
    <el-table-column  label="操作" align="center" width="120">
      <template slot-scope="scope">
        <el-button type="primary" size="small"@click="show(scope.row.productId)">查看详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--预览弹窗表格-->
  <el-dialog title="表格保存预览" width="70%" :visible.sync="selectWindow">
    <el-table :data="selectData" id="selectTable" height="380px">
      <el-table-column prop="productId" label="ID" align="center" width="80"></el-table-column>
      <el-table-column prop="productName" label="商品名称" align="center" width="180"></el-table-column>
      <el-table-column prop="productDescription" label="商品描述" align="center" width="180"></el-table-column>
      <el-table-column prop="status" label="商品状态" align="center" width="120"></el-table-column>
      <el-table-column prop="productTransactionDate" label="商品交易时间" align="center" width="180"></el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="exportExcel">确定保存</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  data() {
    return {
      value1:"",
      value2:"",
      tableData:[],
      //表格中选择的数据
      selectData:[],
      selectWindow:false
    };
},
methods:{
    search(){
     let url ='http://localhost:9999/table/financilalTable';
     let startTime = new Date(this.value1).toLocaleString().replace(/[^\d]/g, '-');
     let endTime = new Date(this.value2).toLocaleString().replace(/[^\d]/g, '-');
     this.axios.get(url,{params:{startTime:startTime,endTime:endTime}})
         .then((response)=>{
           if (response.data.state==20000){
             this.tableData = response.data.data;
             if (this.tableData.length>1){
               this.$message.success('操作成功!!!');
             }else {
               this.$message.error('数据不存在');
             }
           }else if (response.data.state==40400){
             this.$message.error(response.data.message);
           }else{
             console.log('其他状态码的处理');
             // 可以添加对其他状态码的处理逻辑
           }
     }).catch((error) => {
       // 请求失败或返回非2xx和404状态码的处理
       this.$message.error('请求失败');
       console.log('请求错误:', error);
     })
    },
  //格式化数据
  getExcel(dom,title ='默认标题',){
    var excelTitle = title;
    var wb = XLSX.utils.table_to_book(document.querySelector(dom));
    //获取二进制字符串作为输出
    var wbot = XLSX.write(wb,{bookType:"xlsx",bookSST:true,type:"array"});
    try {
      FileSaver.saveAs(
          new Blob([wbot],{type:"application/octet-stream"}),
          excelTitle + ".xlsx"
      );
    }catch (e){
      if (typeof console !== "undefined") console.log(e,wbot);
    }
    return wbot;
  },
  //导出
  exportExcel(){
    this.getExcel('#selectTable','财务报表')
  },
  //显示预览弹窗
  exportExcelSelect(){
    if (this.selectData.length<1){
      this.$message.error('请选择要导出的内容!');
      return false;
    }
    this.selectWindow=true;
  },
  //选中数据
  handleSelectionChange(val){
    this.selectData = val;
  },
  show(everything){
    this.$router.push({path: 'xxx5',query: { everything: JSON.stringify(everything) } })
  }

},
  created() {
    let url ='http://localhost:9999/table/financilalTablew';
    this.axios.get(url).then((response)=>{
      this.tableData=response.data.data;
    })
  }
}
</script>

<style scoped>

</style>